<template>
	<view class="ku-content">
		<view class="ku-section">
			<Logo ref="Logo"></Logo>
			<view class="ku-text-center ku-margin-top-40">
				<view class="ku-lg-title ku-text-theme">仓储管理系统</view>
				<view class="ku-mini-title ">Warehouse Management System</view>
			</view>
			<view class="ku-section-form">
				<view class="ku-margin-top-40">
					<u-form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
						<u-form-item label="用户" prop="userName" borderBottom ref="item1">
							<u-input v-model="userInfo.userName" border="none"  clearable></u-input>
						</u-form-item>
						<u-form-item label="密码" prop="password" borderBottom ref="item1">
							<u-input v-model="userInfo.password" border="none" type="password" clearable></u-input>
						</u-form-item>
						<u-form-item>
							<u-checkbox-group @change="checkboxChangeRememberPassword" :wrap='true'
								v-model="checkedRememberPassword">
								<u-checkbox v-for="(item, index) in checkboxList" :key="index" :label="item.label"
									:name="item.name">
								</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
					</u-form>
				</view>
				<view class="ku-margin-top-40">
					<u-button type="primary" shape="circle" color="linear-gradient(to right,#235EFF, #235EFF)"
						@click="submit">登 录</u-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import Logo from "@/components/logo";
	import store from "@/store";
	import {
		login
	} from "@/api/index.js";
	export default {
		components: {
			Logo,
		},
		data() {
			return {
				checkedRememberPassword: [], // 记住密码
				checkboxList: [{
					label: '记住密码',
					name: true,
				}, ],



				userInfo: {
					userName: store.state.userName, //用户
					password: store.state.password, //密码

					// userName: "luoyudong", //用户
					// password: "123123", //密码
				},
				rules: {
					userName: [{
						required: true,
						message: '请输入用户',
						trigger: ['blur', 'change']
					}, ],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}, ],
				},
				environmentList: [{
						name: "开发环境",
						value: "dev",
					},
					{
						name: "生产环境",
						value: "prod",
					},
				],
			};
		},
		onLoad() {

		},
		onShow() {
			this.getCacheStorage();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {

			checkboxChangeRememberPassword(e) {
				this.checkedRememberPassword = e;
				console.log('记住密码', this.checkedRememberPassword);
			},
			// 提交用户名密码跳转扫码端
			submit() {
				this.$refs.uForm.validate().then(valid => {
					if (valid) {
						//调接口验证
						let params = {
							userName: this.userInfo.userName,
							passWord: this.userInfo.password,
						};


						login(params).then(async (res) => {
							console.log('提交用户名密码-登录-->', res)
							if (res.resp_code === 0 && res.datas) {
								await this.cacheStorage();
								this.$navTo('pages/warehouse/home', {})
							} else {
								uni.showToast({
									title: "用户或密码有误",
									icon: "none",
									duration: 2000,
								});
							}
						})
					} else {
						console.log('验证失败');
					}
				})
			},
			// 把用户信息存储到缓存
			cacheStorage() {
				store.state.userName = this.userInfo.userName; // 用户
				store.state.password = this.userInfo.password; // 密码
				// 把账号密码缓存到app内
				if (!this.checkedRememberPassword[0]) {
					uni.setStorage({
						key: 'userName',
						data: '',
						success: function() {

						}
					});
					uni.setStorage({
						key: 'password',
						data: '',
						success: function() {

						}
					});
					return
				}

				uni.setStorage({
					key: 'userName',
					data: this.userInfo.userName,
					success: function() {
						console.log('存储用户信息1');
					}
				});
				uni.setStorage({
					key: 'password',
					data: this.userInfo.password,
					success: function() {
						console.log('存储用户信息2');
					}
				});
			},
			async getCacheStorage() {
				let _that = this;
				await uni.getStorage({
					key: 'userName',
					success: function(res) {
						_that.userInfo.userName = res.data;

						console.log('------>', res)
					}
				});
				await uni.getStorage({
					key: 'password',
					success: function(res) {
						_that.userInfo.password = res.data;
						if (_that.userInfo.password !== '') {
							_that.checkedRememberPassword = [true]
						}
					}
				});
				console.log('用户信息', this.userInfo);
			}
		},
	};
</script>